import React, { useState, useContext } from "react";
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StatusBar,
  Platform,
} from "react-native";
import { AntDesign } from "@expo/vector-icons";
import companyInfoContext from "../../context/personalDetails/companyInfoContext";

const EditCompanyInfoScreen = ({ navigation }) => {
  const { companyInfo, editCompanyInfo } = useContext(companyInfoContext);
  const [companyPhone, setCompanyPhone] = useState(companyInfo.company_phone);
  const [adminName, setAdminName] = useState(companyInfo.admin_name);
  const [adminPhone, setAdminPhone] = useState(companyInfo.admin_phone);
  const [adminWechat, setAdminWechat] = useState(companyInfo.admin_weChat);

  return (
    <View style={styles.container}>
      <View style={styles.backgroundTop}></View>
      <View style={styles.editModal}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.closeStyle}
        >
          <AntDesign name="close" size={20} color="black" />
        </TouchableOpacity>
        <View style={styles.headerView}>
          <Text style={styles.headerText}>编辑信息</Text>
        </View>

        <View style={[styles.addItem]}>
          <Text style={styles.title}>公司电话:</Text>
          <TextInput
            style={{ fontSize: 16 }}
            maxLength={14}
            textAlign="right"
            placeholder="请编辑公司电话"
            defaultValue={companyInfo.company_phone}
            value={companyPhone}
            onChangeText={(text) => {
              setCompanyPhone(text);
            }}
          />
        </View>

        <View style={[styles.addItem]}>
          <Text style={styles.title}>负责人名称:</Text>
          <TextInput
            style={{ fontSize: 16 }}
            placeholder="请编辑负责人名称"
            maxLength={10}
            textAlign="right"
            defaultValue={companyInfo.admin_name}
            value={adminName}
            onChangeText={(text) => {
              setAdminName(text);
            }}
          />
        </View>

        <View style={styles.addItem}>
          <Text style={styles.title}>负责人电话:</Text>
          <TextInput
            style={{ fontSize: 16 }}
            placeholder="请编辑负责人电话"
            maxLength={11}
            textAlign="right"
            defaultValue={companyInfo.admin_phone}
            value={adminPhone}
            onChangeText={(text) => {
              setAdminPhone(text);
            }}
          />
        </View>

        <View style={styles.addItem}>
          <Text style={styles.title}>负责人微信:</Text>

          <TextInput
            style={{
              fontSize: 16,
            }}
            placeholder="请编辑负责人微信"
            maxLength={15}
            textAlign="right"
            defaultValue={companyInfo.admin_weChat}
            value={adminWechat}
            onChangeText={(text) => {
              setAdminWechat(text);
            }}
          />
        </View>

        <View style={styles.buttonOptions}>
          <TouchableOpacity
            style={styles.cancel}
            onPress={() => navigation.goBack()}
          >
            <Text style={styles.cancelText}>取消</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.confirm}
            onPress={() => {
              editCompanyInfo({
                company_phone: companyPhone,
                admin_name: adminName,
                admin_phone: adminPhone,
                admin_weChat: adminWechat,
              });
            }}
          >
            <Text style={styles.confirmText}>确定</Text>
          </TouchableOpacity>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff9ed",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
  },
  backgroundTop: {
    width: "100%",
    height: "35%",
    // backgroundColor: "#6488e5",
    backgroundColor: "#b7e5e3",
    borderBottomLeftRadius: 30,
    borderBottomRightRadius: 30,
    position: "absolute",
    top: 0,
  },
  closeStyle: {
    position: "absolute",
    left: 25,
    top: 25,
  },
  headerView: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 15,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "bold",
  },
  editModal: {
    backgroundColor: "#fff",
    padding: 20,
    width: "90%",
    borderRadius: 20,
    elevation: 4, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  addItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 10,
    height: 50,
  },
  title: {
    fontSize: 16,
    color: "#22254c",
    width: 90,
  },
  buttonOptions: {
    flexDirection: "row",
    justifyContent: "center",
    alignContent: "center",
    padding: 15,
    marginBottom: 5,
  },
  cancel: {
    flex: 3,
    padding: 10,
    marginRight: 20,
    borderWidth: 1.5,
    borderColor: "#F9be7d",

    alignItems: "center",
    justifyContent: "center",
    borderRadius: 5,
  },
  confirm: {
    borderRadius: 5,
    flex: 7,
    padding: 10,
    backgroundColor: "#F9be7d",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  cancelText: {
    fontSize: 16,
    color: "#22254c",
  },
  confirmText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default EditCompanyInfoScreen;
